<template>
  <div style="padding: 10px; margin-bottom: 50px">
    <el-row>
      <div :span="8">
        <el-card style="width: 100%; color: #333">
          <div style="padding-bottom: 10px; border-bottom: 1px solid #ccc">在线用户<span style="font-size: 12px">（点击聊天气泡开始聊天）</span></div>
        </el-card>
      </div>
      <el-col :span="16">
        <div style="width: auto; margin: 0 auto; background-color: white;
                    border-radius: 5px; box-shadow: 0 0 10px #ccc">
          <div style="text-align: center; line-height: 50px;">
            聊天室（{{ chatUserAccount }}）
          </div>
          <div v-for="message in messageList">
            <div v-if="message.from === chatUserAccount" class="left tip" style="overflow:hidden; border-top: 1px solid #ccc" v-text="message.text"></div>
            <div v-else-if="message.from === user.userAccount" class="right tip" style="overflow:hidden; border-top: 1px solid #ccc" v-text="message.text"></div>
            <br/><br/>
          </div>
          <div style="height: 100%">
            <textarea v-model="chatText" style="height: 160px; width: 100%; border: none; border-top: 1px solid #ccc;
             border-bottom: 1px solid #ccc; outline: none"></textarea>
            <div style="text-align: right; padding-right: 10px">
              <van-button type="primary" size="mini" @click="send(chatText)">发送</van-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../../services/api";
import {useRoute} from "vue-router";

const user = ref({}); // 当前登录用户
const route = useRoute();
const chatUser = route.query.chatUser;
const chatUserAccount = ref(chatUser); // 对方账号

let wsUrl;
let ws;
const chatText = ref(''); // 聊天内容
const messageList = ref([]);

onMounted(() => {
  const socketBaseUrl = import.meta.env.VITE_SOCKET_BASE_URL;
  const loginUser = getCurrentUser();
  if (loginUser) {
    user.value = loginUser;
  }
  wsUrl = socketBaseUrl + "/chat/" + user.value.userAccount
  ws = new WebSocket(wsUrl);
  ws.onopen = () => {
    console.log("本地用户上线！");
  };
  ws.onmessage = (msg) => {
    const data = JSON.parse(msg.data);
    if (data.info === 'onLineUserList') {
      // 说明返回了在线用户列表
      console.log("在线用户列表：");
      console.log(data.data)
    } else if (data.info === 'msg') {
      // 说明返回的是消息
      const obj = data.data;
      messageList.value.push(obj);
    }
  };
  ws.onclose = () => {
    console.log("本地用户下线！");
  }
})

// 发送消息
const send = (msg: string) => {
  const sendObj = {
    from: user.value.userAccount,
    to: chatUserAccount.value,
    text: msg
  }
  messageList.value.push(sendObj);
  chatText.value = ''; // 清空聊天区
  ws.send(JSON.stringify(sendObj));
}
</script>


<style scoped>
.tip {
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
  line-height: 16px;
  padding: 10px;
  width:20%;
}
.right {
  float: right;
  background-color: deepskyblue;
}
.left {
  float: left;
  background-color: forestgreen;
}
</style>